/**
 * v-copy
 * 复制某个值至剪贴板
 * 接收参数：string类型/Ref<string>类型/Reactive<string>类型
 */

import { ElMessage } from 'element-plus'
import type { Directive, DirectiveBinding } from 'vue'

interface ElType extends HTMLElement {
  copyData: string | number
  __handleClick__: any
}

const mounted = (el: ElType, binding: DirectiveBinding<any>) => {
  el.copyData = binding.value
  el.addEventListener('click', handleClick)
}
const updated = (el: ElType, binding: DirectiveBinding) => {
  el.copyData = binding.value
}
const beforeUnmount = (el: ElType) => {
  el.removeEventListener('click', el.__handleClick__)
}

const copy: Directive = {
  mounted,
  updated,
  beforeUnmount
}

function handleClick(this: any) {
  const input = document.createElement('input')
  input.value = this.copyData.toLocaleString()
  document.body.appendChild(input)
  input.select()
  document.execCommand('Copy')
  document.body.removeChild(input)
  ElMessage({
    type: 'success',
    message: '复制成功'
  })
}

export default copy
